<template>
    <div>
        <div v-if="tbGoodsRecommendList.length">
            <scroll-view scroll-x="true">
                <div style="display: flex;" :style="{width: tbGoodsRecommendList.length * 120 + 'px'}">
                    <view class="demo-warter" v-for="(item, index) in tbGoodsRecommendList" :key="index"
                          @click="navigateTo(`/pages/common/goods-detail/index?id=${item.goodsId}`)">
                        <u-icon size="60" name="/static/icon/recommend.png" style="position: absolute; z-index: 50;"></u-icon>

                        <!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
                        <u-lazy-load threshold="-450" border-radius="10"
                                     :image="item.thumbnailUrl ? item.thumbnailUrl + '?imageView2/1/w/300/h/300' : '/static/default-image/goods.jpg'"
                                     :index="index"></u-lazy-load>
                        <view class="demo-title">{{ item.goodsTitle }}</view>
                        <view class="demo-tag">
                        </view>
                    </view>
                </div>
            </scroll-view>
        </div>

        <div style="padding-top: 50px; padding-bottom: 50px; text-align: center;" v-if="!tbGoodsRecommendList.length">
            没有推荐的商品
        </div>
    </div>
</template>

<script>


    import {TbGoodsRecommendService} from "../../../dev/services/tb-goods-recommend.service";

    export default {
        data: function () {
            return {
                tbGoodsRecommendList: [],
            }
        },
        components: {},
        mounted() {
            this.doInfinite();
        },
        methods: {
            doInfinite() {
                const _self = this;
                new TbGoodsRecommendService().findTbGoodsRecommendListCascade({
                    fkId: _self.globalVariable.userInfo.tbCommunity.tbCommunityHomeConfig.id,
                    status: "1",
                    deleted: 0,
                    isFindValidTimeRange: true,
                    orderBy: 'display_order asc'
                }).then(result => {
                    _self.tbGoodsRecommendList = result;
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import "./goods-recommend-module.scss";
</style>
